<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


</head>

<body>
    <div id="app">
        <h1>学生列表</h1>
        <button @click="addStudent">添加一个学生</button>
        <ul>
            <!-- v-for 遍历数组 -->
            <!-- <li v-for="stu in students">
                {{stu.id}} -- {{stu.name}} -- {{stu.age}}
            </li> -->
            <!-- v-for key 保证唯一性 类型 基本数据类型 -->
            <li v-for="(stu,index) in students" :key="stu.id">
                {{stu.id}} -- {{stu.name}} -- {{stu.age}} -- {{index}}
                <input type="text">
            </li>
        </ul>

        <!-- v-for 遍历对象 无序 -->
        <!-- <div v-for="value in person">
            {{value}}
        </div> -->
        <!-- <div v-for="(value,key) in person">
            {{value}} -- {{key}}
        </div> -->
        <div v-for="(value,key,index) in person" :key="key">
            {{value}} -- {{key}} -- {{index}}
        </div>

        <!-- v-for 遍历正整数字 -->
        <div v-for="num in 10">
            {{num}}
        </div>
        <div v-for="(num,index) in 10" :key="num">
            {{num}} -------------{{index}}
        </div>



    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { ref, reactive, watch, createApp, toRefs } = Vue;
        createApp({
            setup() {
                const students = ref([

                    { id: '001', name: '张三', age: 20 },
                    { id: '002', name: '李四', age: 23 },
                    { id: '003', name: '老王', age: 30 },
                    { id: '004', name: '老刘', age: 40 },

                ])

                const person = reactive({
                    age: 18,
                    name: '小红',
                    gender: "女",
                    hobby: "唱歌",
                    address: "北京",
                    phone: "13812345678",
                    email: "123456@qq.com"
                })

                const addStudent = () => {
                    // students.value.push({ id: '005', name: '老赵', age: 25 })
                    students.value.unshift({ id: '005', name: '老赵', age: 25 })
                }
                return {
                    students,
                    person,
                    addStudent
                }
            }

        }).mount('#app')
    </script>
</body>

</html>